<!DOCTYPE html>
<html>
<head>
    <title>用户管理</title>
    {% include 'admin/common/header.html' %}
</head>
<body class="pear-container">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="realname" placeholder="" class="layui-input">
                    </div>
                    <label class="layui-form-label">用户账号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="username" placeholder="" class="layui-input">
                    </div>
                    <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                    <button type="reset" class="pear-btn pear-btn-md">
                        <i class="layui-icon layui-icon-refresh"></i>
                        重置
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="user-table" lay-filter="user-table"></table>
        </div>
    </div>
</body>
<script type="text/html" id="user-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
</script>
<script type="text/html" id="user-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"> 编辑</i>
    </button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"> 删除</i>
    </button>
</script>
{% include 'admin/common/footer.html' %}
<script>
    layui.use(['table', 'form'], function () {
            let table = layui.table
            let form = layui.form
            let MODULE_PATH = '/admin/user/'
            let cols = [
                [
                {title: 'id', field: 'id', width: 110},
                {title: '姓名', field: 'realname' },
                {title: '账号', field: 'username'},
                {title: '注册时间', field: 'create_at'},
                {title: '更新时间', field: 'update_at'},
                {title: '操作', toolbar: '#user-bar', width: 180, align: 'center'}
                ]
            ]
            table.render({
                elem: '#user-table',
                url: MODULE_PATH + 'data',
                page: true,
                cols: cols,
                skin: 'line',
                height: 'full-148',
                toolbar: '#user-toolbar',
                defaultToolbar: [{
                    layEvent: 'refresh',
                    icon: 'layui-icon-refresh',
                }, 'filter', 'print', 'exports']
            })
            table.on('tool(user-table)', function (obj) {
                if (obj.event === 'remove') {
                    window.remove(obj)
                } else if (obj.event === 'edit') {
                    window.edit(obj)
                }
            })
            table.on('toolbar(user-table)', function (obj) {
                if (obj.event === 'add') {
                    window.add()
                } else if (obj.event === 'refresh') {
                    window.refresh()
                }
            })
            form.on('submit(user-query)', function (data) {
                table.reload('user-table', {where: data.field})
                return false
            })
            window.add = function () {
                layer.open({
                    type: 2,
                    title: '新增',
                    shade: 0.1,
                    area: ['550px', '550px'],
                    content: MODULE_PATH + 'add'
                })
            }
            window.edit = function (obj) {
                layer.open({
                    type: 2,
                    title: '修改',
                    shade: 0.1,
                    area: ['550px', '550px'],
                    content: MODULE_PATH + 'edit/' + obj.data['id']
                })
            }
            window.remove = function (obj) {
                layer.confirm('确定要删除该用户', {icon: 3, title: '提示'}, function (index) {
                    layer.close(index)
                    let loading = layer.load()
                    $.ajax({
                        url: MODULE_PATH + 'remove/' + obj.data['id'],
                        dataType: 'json',
                        type: 'delete',
                        success: function (result) {
                            layer.close(loading)
                            if (result.success) {
                                layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                                    obj.del()
                                })
                            } else {
                                layer.msg(result.msg, {icon: 2, time: 1000})
                            }
                        }
                    })
                })
            }
            window.refresh = function () {
                table.reload('user-table')
            }
        })
</script>
</html>